<template>
  <div>
    <a-card
      :bordered="false"
      size="default"
      title="字典列表">
      <div class="table-operator">
        <a-button type="primary" class="btn-success" icon="plus" @click="handleAdd()">新增</a-button>
      </div>
      <a-spin :spinning="loading">
        <a-table
          ref="table"
          :columns="columns"
          :dataSource="data"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
        >
          <span slot="name" slot-scope="text">
            <ellipsis :length="80" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="dictValue" slot-scope="text">
            <ellipsis :length="80" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="operate" slot-scope="text, record">
            <template>
              <a @click="handleCheck(record)" >详情</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">修改</a>
              <a-divider type="vertical" />
              <a class="text-danger" @click="handleDelete(record)" >删除</a>
            </template>
          </span>
        </a-table>
      </a-spin>
      <view-modal ref="viewModal" @ok="handleOk" />
      <create-modal ref="createModal" @ok="handleOk" />
      <edit-modal ref="editModal" @ok="handleOk" />
    </a-card>

  </div>
</template>

<script>
import moment from 'moment'
import { Ellipsis } from '@/components'
import ViewModal from './modules/dictionary/viewModal'
import CreateModal from './modules/dictionary/createModal'
import EditModal from './modules/dictionary/editModal'
import { getDictionariesList, deleteTDictionaries } from '@/api/dictionary'
import { getRoutePermission } from '@/utils/util'

export default {
  name: 'Dictionary',
  components: {
    Ellipsis,
    ViewModal,
    CreateModal,
    EditModal
  },
  data () {
    return {
      routerPermission: {}, // 页面菜单权限
      data: [],
      loading: true,
      visible: false,
      confirmLoading: false,
      // 分页属性
      pagination: {
        defaultPageSize: 10,
        pageNo: 0,
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true, // 是否可以快速跳转至某页
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: total => this.$t('pagination.total') + ` ${total} ` + this.$t('pagination.items'), // 分页中显示总的数据
        total: 0 // 总条数
      }
    }
  },
  created () {
    // 国际化表头初始化
    this.columns = [
      {
        title: '名称',
        dataIndex: 'name',
        width: 300,
        scopedSlots: { customRender: 'name' },
        sorter: (a, b) => {
          return a.name.localeCompare(b.name)
        } // 排序设置
      },
      {
        title: '字典名称',
        dataIndex: 'dictKey',
        width: 200
      },
      {
        title: '字典值',
        dataIndex: 'dictValue',
        width: 600,
        scopedSlots: { customRender: 'dictValue' }
      },
      {
        title: '描述',
        dataIndex: 'description',
        scopedSlots: { customRender: 'description' }
      },
      {
        title: '操作',
        width: '150px',
        dataIndex: 'operate',
        scopedSlots: { customRender: 'operate' }
      }
    ]
  },
  mounted () {
    this.getDictionariesList()
    // this.getPermission()
  },

  methods: {
    // 获取当前页面的权限
    getPermission () {
      this.routerPermission = getRoutePermission(this.$route.name)
      console.log('当前页面操作权限-------', this.routerPermission)
    },
    // 查看
    handleCheck (record) {
      this.$refs.viewModal.check(record)
    },
    // 新增
    handleAdd () {
      this.$refs.createModal.add()
    },

    // 编辑
    handleEdit (record) {
      console.log('编辑record-------', record)
      this.$refs.editModal.edit(record)// $refs指弹出框的所有方法，edit只是modal框的一个方法
    },

    // 删除
    handleDelete (record) {
      this.$confirm({
        title: '提示',
        content: `你确认要删除字典 ${record.name} 吗?`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk: () => {
          deleteTDictionaries({ dictionariesId: record.id }).then(res => {
            // 存储成功、刷新列表
            this.$notification['success']({
              message: '提示',
              description: '数据删除成功'
            })
            if (this.data.length === 1) {
              this.pagination.pageNo = this.pagination.pageNo - 1
            }
            this.getDictionariesList()
          })
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },

    // 获取列表
    getDictionariesList () {
      const filter = { sort: 'id,desc', page: this.pagination.pageNo, size: this.pagination.pageSize }
      this.loading = true
      getDictionariesList(filter).then(response => {
        console.log('字典列表----', response)
        response.data.forEach((item) => {
          item.createDate = moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')
          item.modifyDate = moment(item.modifyDate).format('YYYY-MM-DD HH:mm:ss')
        })
        this.loading = false
        this.data = response.data
        this.pagination.total = Number(response.totalCount)
      }).catch(error => {
        console.log(error)
      })
    },

    // 更新列表
    handleOk () {
      // this.$refs.table.refresh()
      this.getDictionariesList()
    },

    // 分页方法
    handleTableChange (pagination) {
      console.log('分页事件-----------', pagination)
      this.pagination.pageNo = pagination.current - 1
      this.pagination.pageSize = pagination.pageSize
      this.getDictionariesList()
    }
  }
}
</script>

<style>
.ant-card-body {
  padding: 20px !important;
}
.antd-pro-components-standard-form-row-index-label > span {
  width: 150px;
  height: auto !important;
  border-right: 3px solid #1890ff;
  background: #e6f7ff;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control-wrapper{
    margin-top: 5px!important;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-label{
    margin-top: 5px!important;
}
</style>
<style lang="less" scoped>
.table-operator{
  margin-bottom:10px;
}
/deep/ .ant-card-head{
  padding: 0 20px;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item{
  margin-bottom: 0;
}
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
}
</style>
<style lang="less" scoped>
.checkable{
  margin-bottom: 10px;
  padding:5px 0;
  border-bottom: 1px dashed #e8e8e8;
  >span{
    float: left;
    padding-right: 5px;
    width: 100px;
    color: #888;
    height: auto !important;
  }
  .checkable-right{
    margin-left: 100px;
    .ant-tag-checkable{
      color: #333;
    }
    .ant-tag-checkable-checked{
      color: #fff;
    }
  }
}
.search-btn-handle{
  .table-page-search-submitButtons{
    float: right;
  }
}
.ant-table-default {
  background: #f00 !important;
  .ant-table-content {
    .ant-table-thead > tr > th > {
      padding: 10px 16px;
    }
    .ant-table-tbody > tr > td > {
      padding: 10px 16px;
    }
  }
}
</style>
